<template>
    <div class="wrapper">
        <mt-header title="昵称" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
            <mt-button slot="right">
                <i class="icon iconfont icon-guanbi"></i>
            </mt-button>
        </mt-header>
        <div class="blank-9"></div>
        <div class="list">
            <mt-field placeholder="请输入十个字数以内的昵称" type="text" disableClear v-model="inputValueNickname"></mt-field>
        </div>
        <div class="blank-9"></div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="inputValueNickname?false:true" @click="editName">确定</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { mapGetters } from 'vuex'
export default {
    data: function () {
        return {
            inputValueNickname:''
        }
    },
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    mounted(){
        this.inputValueNickname = this.userInfo && this.userInfo.name
    },
    activated(){
        this.inputValueNickname = '';
    },
    methods:{
        editName(){
            if(this.inputValueNickname.length > 10){
                Toast({
                    message: "请输入十个字数以内的昵称",
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                })
            }else{
                this.$store.dispatch('UpdateInfo',{
                    "name":this.inputValueNickname
                }).then((res) => {
                    if( res.code == 200 ){
                        this.inputValueNickname = res.data.name
                        Toast({
                            message: "修改成功",
                            iconClass: 'icon iconfont icon-ic_check'
                        })
                        this.$router.push('/account/myInfo')
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        });
                    }
                }).catch(() => {

                })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .list{
        margin:0 20px;
    }
}
</style>
